<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title>日期管理</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/jquery.calendar.css" />
</head>
<body>
    <div style="font-size:16px; text-align:center;margin:30px;">测试数据请点击23号,^_^</div>
    <div class="ui-calendar">
        <div class="ui-calendar-box ">
            <div class="ui-calendar-left">
                <div class="ui-calendar-container fn-clear">
                    <div class="ui-calendar-select-box">
                        <div class="ui-calendar-year-box">
                            <div tabindex="0" class="ui-dropdown ui-dropdown-common">
                                <div class="ui-dropdown-btn-group">
                                    <div class="ui-dropdown-btn"><span></span>年</div>
                                    <div class="ui-dropdown-btn-icon">
                                        <div class="ui-dropdown-btn-icon-border">
                                            <i class="ui-icon ui-icon-triangle-down"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-dropdown-menu" data-height="312">
                                    <div class="ui-dropdown-menu-inner">
                                        <ul class="ui-dropdown-menu-box"></ul>
                                    </div>
                                    <div class="ui-scroll-ctrl-scroll">
                                        <div class="ui-scroll-axis"></div>
                                        <div class="ui-scroll-slider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ui-calendar-month-box">
                            <a class="ui-calendar-prev-month" href="javascript:void(0);">&lt;</a>
                            <a class="ui-calendar-next-month" href="javascript:void(0);">&gt;</a>
                            <div tabindex="0" class="ui-dropdown ui-dropdown-common">
                                <div class="ui-dropdown-btn-group">
                                    <div class="ui-dropdown-btn"><span></span>月</div>
                                    <div class="ui-dropdown-btn-icon">
                                        <div class="ui-dropdown-btn-icon-border">
                                            <i class="ui-icon ui-icon-triangle-down"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui-dropdown-menu" data-height="312">
                                    <div class="ui-dropdown-menu-inner">
                                         <ul class="ui-dropdown-menu-box"></ul>
                                    </div>
                                    <div class="ui-scroll-ctrl-scroll">
                                        <div class="ui-scroll-axis"></div>
                                        <div class="ui-scroll-slider"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="javascript:void(0);" class="ui-btn ui-calendar-back-today">返回今天</a>
                    </div>

                    <div class="ui-calendar-table-box">
                        <table class="ui-calendar-table">
                            <tbody>
                            <tr>
                                <th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th class="ui-calendar-table-weekend">六</th><th class="ui-calendar-table-weekend">日</th>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="ui-calendar-editor">
                    <div class="ui-calendar-sign-feast ui-calendar-sign-disabled">标记为节假日</div>
                    <div class="ui-calendar-sign-holiday ui-calendar-sign-disabled">标记为休息日</div>
                </div>
            </div>
            <div class="ui-calendar-right">
                <div class="ui-calendar-info ui-calendar-feast">
                    <h2><span></span>指定节假日：</h2>
                    <ul class="ui-calendar-feast-list fn-clear"></ul>
                </div>
                <div class="ui-calendar-info ui-calendar-holiday">
                    <h2><span></span>法定休息日：</h2>
                    <ul class="ui-calendar-holiday-list fn-clear"></ul>
                </div>
            </div>
        </div>
    </div>
    <div style="height:2000px;">
        占位符,测试绑定鼠标滚轮事件
    </div>
    <script type="text/javascript" src="script/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="script/jquery.calendar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var $scrollbar = $(".ui-calendar-box");
            $scrollbar.wkCalendar({
                todayDate: new Date()
            });
        });
    </script>
</body>
</html>